<template>
	<view>
		<picker @change="PickerChange" :value="index" :range="picker">
			<view class="picker" v-if="index != -1">
				{{picker && picker[index]}}
			</view>
			<view class="picker text-grey" v-else>{{placeholder}}</view>
		</picker>
	</view>
</template>

<script>
	export default{
		props: {
			value: {type: [String, Number]},
			list: { type: Array, default: () => {return []} },
			placeholder: { type: String, default: () => {return "请选择"} },
			defaultProps: { type: Object, default: () => {return {label: 'label', value: 'value'}}}
		},
		watch: {
			value(cur) {
				this.index = this.list && this.list.findIndex(item => item[this.defaultProps.value] == cur)
			},
			list(cur) {
				this.index = cur && cur.findIndex(item => item[this.defaultProps.value] == this.value)
			}
		},
		computed: {
			picker() {
				return this.list && this.list.map(item => item[this.defaultProps.label])
			}
		},
		data() {
			return {
				index: -1
			}
		},
		methods: {
			PickerChange(e) {
				this.index = e.detail.value
				this.$emit("input", this.list[this.index][this.defaultProps.value])
			},
		}
	}
</script>

<style>
</style>